<template>

  <div id="index">
    <van-nav-bar
        title="身份认证"
        left-text=""
        left-arrow
        @click-left="back"/>
    <div>

      <van-form @submit="onSubmit" style="margin-top: 12px;">
        <van-cell-group inset v-show="false">
          <van-field
              v-model="username"
              name="姓名"
              label="姓名"
              placeholder="姓名"

          />
          <van-field
              v-model="password"
              type="password"
              name="性別"
              label="性別"
              placeholder="性別"
          />
        </van-cell-group>

        <div style="margin-top: 12px;">
          <CustomIDCardUploader
              :description-txt-a="uploaderConfig.txt1"
              :description-txt-b="uploaderConfig.txt2"
              :cardFrontBackground="uploaderConfig.frontBackground"
              :cardBackBackground="uploaderConfig.backBackground"
              :frontCallBack="uploadIDCardFront"
              :backCallBack="uploadIDCardBack">
          </CustomIDCardUploader>
        </div>

        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>



    </div>

  </div>

</template>

<script setup lang="ts">
/**
 * @title -个人资料填写
 * @author -qqz
 * @date -2024-03-20
 */

import {ref} from 'vue';
import CustomIDCardUploader from "@/components/CustomIDCardSelect.vue";

const uploaderConfig = ref({
  frontBackground: new URL('../../../assets/image/idcard/ico_card_front.png', import.meta.url).href,
  backBackground: new URL('../../../assets/image/idcard/ico_card_back.png', import.meta.url).href
  ,
  txt1: '身份证正面',
  txt2: '身份证反面'
})

const username = ref('');
const password = ref('');
const onSubmit = (values: any) => {
  console.log('submit', values);
};

/**
 * 上传身份证正面
 * @param file 文件
 */
const uploadIDCardFront = (file: any) => {
  console.log(file);
}

/**
 * 身份证反面
 * @param file 文件
 */
const uploadIDCardBack = (file: any) => {
  console.log(file);
}


/**
 * 返回
 */
const back = () => {
  history.back()
}


</script>

<style scoped>


#index {
  width: 100%;
  height: 100%;
}
</style>
